<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
</head>

<body>
    <div id="app">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>

        <hr>

        <select v-model="selectedArr" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selectedArr }}</span>

        <hr>
        
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

    <script type="module">
        import Vue from '../vue.esm.browser.js'

        const app = new Vue({
            el: '#app',
            data: {
                selected: '',
                selectedArr: [],

                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]
            }
        })
    </script>
</body>

</html>